<template>
  <div>
    <table cellspacing=1 border=1 style="width:600px ;text-align:center ">
      <caption>欢迎光临</caption>
      <tr>
        <th>苹果10￥/斤，折扣 &lt;8折&gt; </th>
      </tr>
      <tr>
        <td>请输入你要购买的斤数 <input v-model="danjia" type="number" name="" id=""> </td>
      </tr>
      <tr>
        <td><button @click="bbq">结账买单</button> </td>
      </tr>
      <tr>
        <td>结账单:总价{{zongjia}}￥元 折后价:{{zhekoujia}}￥元 省了:{{sheng}}元 </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'Vue2App',

  data() {
    return {
      danjia : '0',
      zongjia: '0',
      zhekoujia: '0',
      sheng: '0'
    };
  },
methods: {
    bbq(){
      this.zongjia = this.danjia * 10
      this.zhekoujia = this.danjia * 10 * 0.8
      this.sheng = this.danjia *10 *0.2
    }


  },
};
</script>

<style lang="scss" scoped>

</style>